<template>
	<view class="personifo">
		<view style="background-color: #f4f4f4; height: 20px;" ></view>
	
		<view class="content">
			<view class="head_picture">
				<view class="upload" >
					<text>头像：</text>
					<view class="example-body">
						<uni-section>
							<uni-file-picker  :image-styles="imageStyles" limit="1" @select="select" ></uni-file-picker>
						</uni-section>	
					</view>
				</view>
			</view>

			<uni-section>
					<view class="example">
						<!-- 自定义表单校验 -->
						<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
							<uni-forms-item label="昵称"  name="name">
								<uni-easyinput v-model="customFormData.name" placeholder="请输入昵称" />
							</uni-forms-item>
							<uni-forms-item label="手机号"  name="age">
								<uni-easyinput v-model="customFormData.phone" placeholder="请输入联系方式" />
							</uni-forms-item>
							
						</uni-forms>
						
						<uni-section title="条件擅长" type="line">
						      <uni-data-select
						        v-model="value"
						        :localdata="range"
						        @change="change"
						      ></uni-data-select>
						</uni-section>
						
						
						<button style="margin-top: 80px; background-color: lightblue;" type="primary" @click="submit()">保存</button>
					</view>
			</uni-section>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				value: 0,
				  range: [
					{ value: 0, text: "视力残疾" },
					{ value: 1, text: "听力残疾" },
					{ value: 2, text: "言语残疾" },
					{ value: 3, text: "肢体残疾" },
					{ value: 4, text: "智力残疾" },
					{ value: 5, text: "精神残疾" },
					{ value: 6, text: "多重残疾" },
				  ],
				
				// 基础表单数据
								baseFormData: {
									name: '',
									age: '',
									introduction: '',
									sex: 2,
									hobby: [5],
									datetimesingle: 1627529992399
								},
								// 表单数据
								alignmentFormData: {
									name: '',
									age: '',
								},
								// 单选数据源
								sexs: [{
									text: '男',
									value: 0
								}, {
									text: '女',
									value: 1
								}, {
									text: '保密',
									value: 2
								}],
								// 多选数据源
								hobbys: [{
									text: '陪玩',
									value: 0
								}, {
									text: '跑腿',
									value: 1
								}, {
									text: '般运',
									value: 2
								}, {
									text: '快递',
									value: 3
								}, {
									text: '接人',
									value: 4
								}, {
									text: '其他',
									value: 5
								}],
								// 分段器数据
								current: 0,
								items: ['左对齐', '顶部对齐'],
								// 校验表单数据
								valiFormData: {
									name: '',
									age: '',
									introduction: '',
								},
								// 校验规则
								rules: {
									name: {
										rules: [{
											required: true,
											errorMessage: '姓名不能为空'
										}]
									},
									age: {
										rules: [{
											required: true,
											errorMessage: '年龄不能为空'
										}, {
											format: 'number',
											errorMessage: '年龄只能输入数字'
										}]
									}
								},
								// 自定义表单数据
								customFormData: {
									name: '',
									phone: '',
									image:'',
									hobby: []
								},
								// 自定义表单校验规则
								customRules: {
									name: {
										rules: [{
											required: true,
											errorMessage: '姓名不能为空'
										}]
									},
									age: {
										rules: [{
											required: true,
											errorMessage: '年龄不能为空'
										}]
									},
									hobby: {
										rules: [{
												format: 'array'
											},
											{
												validateFunction: function(rule, value, data, callback) {
													if (value.length < 2) {
														callback('请至少勾选两个兴趣爱好')
													}
													return true
												}
											}
										]
									}
				
								},
				
				
				
				imageStyles: {
									width: 64,
									height: 64,
									border: {
										color: "#A3D8F7",
										width: 2,
										radius: '50%'
									}
								},
								listStyles: {
									// 是否显示边框
									border: true,
									// 是否显示分隔线
									dividline: true,
									// 线条样式
									borderStyle: {
										width: 1,
										color: 'blue',
										style: 'dashed',
										radius: 2
									}
								},

			}
		},
		onLoad() {
			
			

		},
		methods: {
			
		
			
			select(e){
				
				let _this = this
				console.log('选择文件：',e)
				uni.uploadFile({
					url: getApp().globalData.baseUrl+'/uploadImage',
					filePath: e.tempFiles[0].path,
					name: 'file',
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data)
						var obj = JSON.parse(uploadFileRes.data)
						console.log(obj);
						_this.customFormData.image = obj.success
					}
				})
			},
			
			
			submit(){
				
				console.log(this.customFormData)
				uni.request({
					url:getApp().globalData.baseUrl+'/user/insert',
					method:'POST',
					data:{
						username: this.customFormData.name,
						userphone: this.customFormData.phone,
						userimage: this.customFormData.image,
						hobby: this.customFormData.hobby,
						openid: getApp().globalData.openid
					},
					success: (res) => {
						console.log(res)
						uni.showToast({
						 	title:"保存成功",
							icon:'success',
							duration:800
						 })
						 
						setTimeout(() => {
							uni.navigateBack();
						},1000)
					}
				})
				
			}
			


		}
	}
</script>

<style>
	.content {
		margin-top: 20px;
	}
	
	
	.content .head_picture{
		margin-bottom: 10px;
		position: relative;
		height: 50px;
	}
	
	.head_picture .upload{
		position: relative;
	}
	.head_picture text{
		position: absolute;
		left: 15px;
		display: inline;
		top: 33px;
	}
	.example-body {
		margin-left: 90px;
		margin-top: 0;
		padding-top: 0;
	}
	
	.example {
			padding: 15px;
			background-color: #fff;
			font-weight: bold;
		}
	
		.segmented-control {
			margin-bottom: 15px;
		}
	
		.button-group {
			margin-top: 15px;
			display: flex;
			justify-content: space-around;
		}
	
		.form-item {
			display: flex;
			align-items: center;
		}
	
	
</style>
